<template>
  <div id="app" @click="globalNum">
    <h2>测试题</h2>
    <subject 
    v-for="(item,index) in arr"
    :key="index"
    :num1="item.num1"
    :num2="item.num2"
    :isput="item.isput"
    :index="index"
    :arr="arr"

    @submitNum="isPutChange"
    ></subject>
    <div>
    <flags 
    v-for="(item,index) in arr"
    :key="index"
    :index="index"
    :isput="item.isput"
    :rlo="item.rlo"
    :arr="arr"
    @resetInfo="resetInfo"
    ></flags>
    </div>
  </div>
</template>

<script>
import subject from './components/Subject.vue'
import flags from './components/Flags.vue'
export default {
    name:'App',
  components:{
      subject,
      flags
  },
  data(){
      return {
          globalClick:true,
          arr:[
              {
                num1:0,
                num2:0,
                isput:false,
                rlo:'未完成'
              },
               {
                num1:0,
                num2:0,
                isput:false,
                 rlo:'未完成'
              },
               {
               num1:0,
                num2:0,
                isput:false,
                 rlo:'未完成'
              },
               {
               num1:0,
                num2:0,
                isput:false,
                 rlo:'未完成'
              },
               {
                num1:0,
                num2:0,
                isput:false,
                 rlo:'未完成'
              }
          ]
      }
  },
  methods:{
globalNum(){
    if(!this.globalClick) return;
    // 产生随机数往数组里面添加
this.arr.forEach(item=>{
    // 一次产生两个随机数
     let random1=Math.ceil(Math.random()*10)
     let random2=Math.ceil(Math.random()*10)
    //  往每一项里面添加
    item.num1=random1;
     item.num2=random2;
})
// 赋值完毕后 开启防抖  
this.globalClick=false
// 让按钮都重新变成未点击
this.arr.forEach(item=>item.isput=false)
},
isPutChange(index,answer){
    this.arr[index].isput=!this.arr[index].isput
    // 做判断
    let ans=this.arr[index].num1+this.arr[index].num2
    if(answer==ans){
        this.arr[index].rlo='正确'
    }else{
        this.arr[index].rlo='错误' 
    }
},
resetInfo(){
    this.arr.forEach(item=>item.rlo='未完成')
}
  },
  mounted(){
        this.globalNum() 
  },
  watch:{
      arr:{
          deep:true,
          handler(arr){
            // this.globalClick= arr.every(item=>item.isput===true)
            if(arr.every(item=>item.isput===true)){
                this.globalClick=true;
                
            }
          }
      }
  }
};
</script>

<style scoped lang="less">
body {
  background-color: #eee;
  #app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
}
</style>